/*
 * @Author: fanjs
 * @Date: 2025-03-16 22:07:24
 * @Description:
 */
import { forwardRef } from "react";
import { Card, Chip, CardBody, CardHeader, CardFooter, Button } from "@heroui/react";
import { EmailItem } from '../types'
import { SvgIcon } from "@/components/SvgIcon";

interface ConfigTableListProps {
  connectedId: string;
  list: EmailItem[];
  topContent?: React.ReactNode;
  onDelete: (item: EmailItem) => void;
  onConnect: (item: EmailItem) => void;
  toContent: (item: EmailItem) => void;
}

const labelClass = 'text-default-500 text-[12px]';

const ConfigList = forwardRef<any, ConfigTableListProps>(({ connectedId, topContent, list, onDelete, onConnect, toContent }) => {

  return (
    <div className="flex flex-col gap-4">
      {/* 顶部内容 */}
      {topContent}

      {/* 卡片列表 */}
      {list.length === 0 && (
        <div className='mt-40 flex-center flex-col text-default-300 font-sans text-sm'>
          <SvgIcon icon="line-md:folder-cancel" className='text-2xl mb-2' />
          <p>暂无数据</p>
        </div>
      )}
      <div className="pb-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {list.map((item, index) => (
          <Card
            key={item.id}
            className="w-full hover:translate-y-[-3px] duration-300 animate-fade-in"
            style={{
              animationDelay: `${index * 100}ms`,
              animationFillMode: 'both'
            }}
          >
            <CardHeader className="flex items-center font-semibold">
              {connectedId === item.id ? <Chip size="sm" variant="flat" color="secondary" className="mr-2 rounded-[4px] text-[11px]">已连接</Chip> : null}
              <h3 className="text-[15px] flex-y-center whitespace-nowrap">
                {item.email_account}
              </h3>
            </CardHeader>
            <CardBody className="border-t border-b border-default-100">
              <div className="grid grid-cols-2 gap-2">
                <div>
                  <p className={labelClass}>邮箱服务商</p>
                  <p>{item?.company_name}</p>
                </div>
                <div>
                  <p className={labelClass}>连接协议</p>
                  <p>{item?.protocol}</p>
                </div>
                <div>
                  <p className={labelClass}>创建时间</p>
                  <p>{item?.created_at || '--'}</p>
                </div>
                <div>
                  <p className={labelClass}>最后连接时间</p>
                  <p>{item?.connected_at || '--'}</p>
                </div>
              </div>
            </CardBody>

            <CardFooter className="flex justify-end items-center py-2">
              <div className="flex gap-2">

                {connectedId === item.id
                  ?
                  <Button size="sm" onPress={() => toContent(item)} color="secondary">去配置邮件</Button>
                  : (
                    <>
                      <Button size="sm" variant="flat" onPress={() => onDelete(item)} color="danger">删除</Button>
                      <Button size="sm" variant="flat" onPress={() => onConnect(item)} color="secondary">连接服务</Button>
                    </>
                  )
                }
              </div>
            </CardFooter>
          </Card>
        ))}
      </div>
    </div>
  );
})

export default ConfigList;
